<template>
    <div class="industry">
        <el-image :src="img01"></el-image>
        <div class="center-page">
            <div
                v-for="(item, index) in industries.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                class="card"
            >
                <div v-if="index%2 == 0">
                    <div style="overflow: hidden">
                        <div style="float: left; width: 50%">
                            <p class="title">{{item.title}}</p>
                            <p class="note">
                                <label v-if="item.date != null">创建时间：{{item.date}}&nbsp;&nbsp;</label><label v-else></label>
                                <label v-if="item.origin != null">来源：{{item.origin}}&nbsp;&nbsp;</label><label v-else></label>
                                <label v-if="item.author != null">作者：{{item.author}}&nbsp;&nbsp;</label><label v-else></label>
                            </p>
                            <div
                                class="content"
                                v-html="item.content"
                            ></div>
                            <el-button @click="toOneInformation(item.id)">VIEW MOEW</el-button>
                        </div>
                        <div style="float: right;"><img
                                :src="showUrl + item.id"
                                alt=""
                                height="340px"
                                width="500px"
                            ></div>
                    </div>
                    <el-divider></el-divider>

                </div>
                <div v-else>
                    <div style="overflow: hidden">
                        <div style="float: left;"><img
                                :src="showUrl + item.id"
                                alt=""
                                height="340px"
                                width="500px"
                            ></div>
                        <div style="float: right; width: 50%">
                            <p class="title">{{item.title}}</p>
                            <p class="note">
                                <label v-if="item.date != null">创建时间：{{item.date}}&nbsp;&nbsp;</label><label v-else></label>
                                <label v-if="item.origin != null">来源：{{item.origin}}&nbsp;&nbsp;</label><label v-else></label>
                                <label v-if="item.author != null">作者：{{item.author}}&nbsp;&nbsp;</label><label v-else></label>
                            </p>
                            <div
                                class="content"
                                v-html="item.content"
                            ></div>
                            <el-button
                                style="float: right"
                                @click="toOneInformation(item.id)"
                            >VIEW MOEW</el-button>
                        </div>

                    </div>
                    <el-divider></el-divider>

                </div>
            </div>
            <el-button-group>
                <el-button
                    type="primary"
                    icon="el-icon-arrow-left"
                    @click="subPage"
                >上一页</el-button>
                <el-button
                    type="primary"
                    @click="addPage"
                >下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
            </el-button-group>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            img01: require("@/assets/images/industry/industry-information.png"),
            industries: [{ id: 0 }],
            showUrl: this.$uploadPath + "/industry/getImage?id=0",
            currentPage: 1,
            pageSize: 3
        };
    },
    methods: {
        getIndustries() {
            this.$http("/industry/getAll")
                .then(response => {
                    this.industries = response.data;
                })
                .catch(err => err);
        },
        toOneInformation(id) {
            this.$router
                .push({ path: "/oneInformation", query: { id: id } })
                .catch(err => err);
        },
        addPage() {
            if (
                parseInt(this.industries.length / this.pageSize + 1) ==
                this.currentPage
            ) {
                return false;
            }
            this.currentPage += 1;
        },
        subPage() {
            if (this.currentPage == 1) {
                return false;
            }
            this.currentPage -= 1;
        }
    },
    mounted() {
        this.getIndustries();
    }
};
</script>

<style>
.industry .card {
    height: 400px;
}
.industry .title {
    font-family: "黑体";
    font-size: 22px;
    height: 20px;
}
.industry .note {
    height: 20px;
}
.industry .content {
    font-family: "微软雅黑";
    height: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>